<template>
  <el-dialog class="dialog-class" v-model="visible">
    <template #header>
      <div class="dialog-header">
        <div class="left">
          <img src="@/assets/images/detail.png" alt="">
          <span>详情</span>
        </div>
      </div>
    </template>
    <el-form class="dialog-form" label-position="left" label-width="auto">
      <div class="detail-device-container">
        <el-form-item label="设备编号">
          <span class="detail-span">{{ params.sbbh }}</span>
        </el-form-item>
        <el-form-item label="设备名称">
          <span class="detail-span">{{ params.sbmc }}</span>
        </el-form-item>
        <el-form-item label="设备型号">
          <span class="detail-span">{{ params.sbxh }}</span>
        </el-form-item>
        <el-form-item label="设备位置说明">
          <span class="detail-span">{{ params.sbwz }}</span>
        </el-form-item>
        <el-form-item label="所属实训室">
          <span class="detail-span">{{ params.sys }}</span>
        </el-form-item>
        <el-form-item label="出场日期">
          <span class="detail-span">{{ params.ccrq }}</span>
        </el-form-item>
      </div>
      <el-form-item label="品牌名称">
        <span class="detail-span">{{ params.pp }}</span>
      </el-form-item>
      <el-form-item label="设备参数">
        <span class="detail-span detail-span-h">{{ params.sbcs }}</span>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
  
<script setup>
const emits = defineEmits(['update:open', 'finish'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  params: {
    type: Object,
    default: () => { return {} }
  }
})
const visible = computed({
  get: () => {
    return props.open
  },
  set: (value) => {
    emits('update:open', value)
  }
})
watch(() => props.open, value => {
  if (value) {
    console.log(props.params)
  }
})
</script>
<style lang="scss" scoped>
.detail-device-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-column-gap: 2%;
}

.detail-span {
  color: #7dc1f7;
  width: 85%;
}

.detail-span-h {
  height: vh(110);
  overflow: auto;
}

.dialog-header {
  .left {
    display: flex;
    align-items: center;

    img {
      width: 24px;
      height: 24px;
    }

    span {
      margin-left: 5px;
      color: #7dc1f7;
      font-size: 14px;
    }
  }
}
// 主要部分, 必须存在, 并且必须设定尺寸

::-webkit-scrollbar {

width: 5px;

height: 10px;

}

// 滚动条两端的按钮

::-webkit-scrollbar-button {

background-color: #041741;

width: 10px;

height: 0px;

}

// 滚动条的滑块部分

::-webkit-scrollbar-thumb {

background: #2d3748;

border: 0px none #ffffff;

border-radius: 50px;

}

// 滚动条滑块的hover样式

::-webkit-scrollbar-thumb:hover {

background: #2b6cb0;

}

// 滚动条滑块的激活样式

::-webkit-scrollbar-thumb:active {

background: #000000;

}

// 滚动条的外层轨道

::-webkit-scrollbar-track {

background: #1a202c;

border: 0px none #ffffff;

border-radius: 50px;

}

::-webkit-scrollbar-track:hover {

background: #666666;

}

::-webkit-scrollbar-track:active {

background: #333333;

}

// 滚动条的外层轨道-可见部分

::-webkit-scrollbar-track-piece {

background: #041741;

}

// 滚动条边角

::-webkit-scrollbar-corner {

background: transparent;

}

// 滚动条右下角拖动块

::-webkit-resizer {

background-color: transparent;

}
</style>